<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 1050px;
        height: 400px;
        border: 1px solid palegreen;
        margin-left: 100px;
    }
    #title{ 
        position: relative;
        top: 20px;
        right: 26px;
    }
    .left,.right{
        width: 450px;
        height: 100px;
        border: 1px solid transparent;
    }
    .left{
        margin-left: 10px;
        float: left;
    }
    .right{
        float: right;
        position: relative;
        bottom: 400px;
        right: 200px;
    }
    #book1{
        position: relative;
        top: 50px;
    }
    #tag1{
        position: relative;
        bottom: 170px;
        right: 250px;
    }
    .tou{
        width: 200px;
        height: 200px;
        border-color: transparent;
        position: relative;
        bottom: 200px;
        left: 150px;
        font-size: 12px;
    }
    .price{
        color:crimson;
    }
    #book2{
        position: relative;
        top: 100px;
    }
    #book3{
        position: relative;
        left: 0px;
        bottom: -20px;
    }
    #tag2{
        position: relative;
        right: 100px;
        top: 20px;
    }
    #tag3{
        position: relative;
        left: -100px;
        bottom: 50px;
    }
    .kan{
        width: 200px;
        height: 100px;
        position: relative; 
        bottom: 0px;
        border-color: transparent;
    }
    span{
        font-size: 12px;
    }
    .discount{
        font-size: 10px;
        color: grey;
    }
    .bot{
        width: 1000px;
        height: 50px;
        border-color: transparent;
        text-align: center;
        font-family: 宋体;
        color:grey;
        font-size: 12px;
        position: relative;
        left: 200px;
    }
    #vali{
        position: relative;
        right:33px;
        bottom: 30px;
    }
</style>
<body>
    <div>
        
        <div class="left">
            <img src="../image/bg_bang.gif" id="title">
            <img src="../image/book-01.jpg" id="book1">
            <img src="../image/bookNo1.gif" id="tag1">
            <div class="tou">
                <table>
                    <span><a href="www.baidu.com" >偷影子的人</a></span>
                    <br>
                    <span>作者：[法]马克·李维（Marc Levy）著</span>
                    <br>
                    <span>出版社：湖南文艺出版社</span>
                    <br>
                    <span>当当价：</span> <span class="price">¥17.90</span>
                    <br>
                    <span>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”</span>   
                </table>
            </div>
            </div>
        </div>
        <div class="right">
            <img src="../image/book-02.jpg" id="book2">
            <img src="../image/bookNo2.gif" id="tag2">
            <div class="kan">   
                <table >
                    <span><a href="www.baidu.com" >>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</a></span>
                    <br>
                    <span>作者：柴静 著</span>
                    <br>
                    <span>出版社：广西师范大学出版社</span>
                    <br>
                    <span class="price">¥17.90</span>&nbsp &nbsp<span class="discount">7.4折</span>
                    <br>
                    <span><a href="www.baidu.com" >>改变孩子先改变自己</a></span>
                    <br>
                    <span>作者：贾容韬 贾毅 著</span>
                    <br>
                    <span>出版社：作家出版社</span>
                    <br>
                    <span class="price">¥22.20</span>&nbsp &nbsp<span class="discount">7.4折</span>
                </table>
            </div> 
            <img src="../image/book-03.jpg" id="book3">
            <img src="../image/bookNo3.gif" id="tag3">
        </div>
    </div>
    <div class="bot">
        <span>copyright(C)当当网2004-2017,ALl Rights Reserved  &nbsp &nbsp</span>
        <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>
        <img src="../image/validate.gif" id="vali">
    </div>
</body>
</html>